<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    

    <h1>变量名的组成</h1>
    <ul>
        <li>第一个字符必须是字母、下划线（_）或美元符号（$）</li>
        <li>余下的字符可以是下划线、美元符号或任何字母或数字字符</li>
    </ul>


<hr>




    <!--  给 button 绑定一个 click 事件  -->
    <button onclick="clickHandle()"> 点击 </button>


    <script>
        function clickHandle(){

            alert( "Hello" );
            // console.log( this );

        }
    </script>

    <!--  上面这种绑定事件的方法太过麻烦，绑定一个时间还得修改 HTML 属性 ， 所以就引入了下面这种绑定事件的方式 -->



    <!-- 另一种绑定事件的方式  -->
    <button id="btn">按钮(id=btn)</button>

    <script>
    
    
        // 首先我们要做的就是 拿到 需要绑定事件 的 那个 HTML元素

        // 怎么拿到呢？ ———— document.getElementById( id );


        document.getElementById( "btn" ).onclick = function(){

            alert( "Hello, 这个 ID 为 btn 的按钮触发的事件！" );

        }






        // 在这上面， document.getElementById( "btn" ) 代表了 ID 为 btn 的这个按钮，
        // 难道每次需要使用这个按钮的时候，都写这么长一串吗？？

        // var ———— 声明变量
        // 我们给这个按钮取名就叫  oBtn ;  // 为什么前面会加 一个 字母 o， 等以后了解一些数据类型再说
       
       
       
        // var 1de_$ = 1;  // 这个以数字打头的变量名，是错误的
        // var _de$3 = 1;
        // var de_1$ = 1;
        // var $de_1 = 1;
        // var de1_$ = 1;

    

    //  将上面的代码演示完成后，这段是需要取消注释再演示的
/*
        var oBtn = document.getElementById( "btn" );
        //  这个时候，变量 oBtn 就代表这个 Id为 btn 的按钮。
        //  上面这个点击事件就可以改写为这样，

        oBtn.onclick = function(){
            alert( "hello, 这个是 oBtn 出发的弹框！" );
        }
*/



    </script>



</body>
</html>